<template>
	<view class="page">

		<view class="typeContainer">

			<yingyingtang_template_component v-for="(item,index) in templateList" :templateIndex="index" :key="index"
				:item="item" @typeDetailClick="typeDetailClick" style="margin-top: 20rpx;" @deleteItem="deleteItem"
				@add="add" @moveTop="moveTop" @moveDown="moveDown">
			</yingyingtang_template_component>

		</view>
		<view class=""
			style="width: 100%;background-color: #F9FAFB;box-sizing: border-box;padding: 16rpx;height: 9vh;display: flex;justify-content: space-evenly;align-items: center;position: fixed;bottom: 10rpx;left: 0;">
			<view class=""
				style="border-radius: 8rpx;width: 30%;height: 100%;background-color:  #FF4D4F;line-height: 152rpx;color: #FFFFFF;display: flex;justify-content: center;align-items: center"
				@click="save">
				保存
			</view>
			<view class=""
				style="border-radius: 8rpx;width: 30%;height: 100%;border: 1px solid #FF4D4F;line-height: 152rpx;display: flex;justify-content: center;align-items: center;color:#FF4D4F ;"
				@click="cancel">
				取消
			</view>
			<view class=""
				style="border-radius: 8rpx;width: 30%;height: 100%;border: 1px solid #FF4D4F;line-height: 152rpx;display: flex;justify-content: center;align-items: center;color:#FF4D4F ;"
				@click="toAddTempleteTypeIndex">
				添加模版
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapGetters
	} from 'vuex';

	import yingyingtang_template_component from "../../components/yingyingtang-template-component/yingyingtang-template-component.vue"
	export default {
		components: {
			yingyingtang_template_component
		},
		data() {
			return {
				templateTypeList: [],
				templateList: [],
				selectedTemplateListIndex: 0,
				selectedIndex: 0,
				templateTypeButtonList: [], //'四框格', '轮播图', '横向瀑布流', '纵向瀑布流'
			}
		},
		computed: {
			...mapGetters(['productName', 'productId', 'imgSrc'])
		},
		onLoad() {
			//获取当前模板
			this.getTemplateDetail();
		},

		onShow() {
			if (this.templateList.length > 0) {
				var obj = this.templateList[this.selectedTemplateListIndex].products[this.selectedIndex];

				this.$set(obj, "name", this.productName);
				this.$set(obj, "imgSrc", this.imgSrc);
				this.$set(obj, "id", this.productId);
				// this.$set(obj, "price", this.price);
				// this.$set(obj, "discount", this.discount);
			
			};
			//获取类型
			this.getTemplateType();
	

		},
		methods: {
			getTemplateType() {
				var that = this;
				this.$pin.request('GET', `/shop/template/type`, null, successData => {
					console.log(successData)
					if (successData.code == this.$pin.code.success) {
						var result = successData.data;
						var tempList = [];
						var tempList2 = [];
						result.map(res => {
							var typeName = res.name;
							var typeId = res.id;
							var obj = {
								typeName,
								typeId
							}
							tempList2.push(typeName);
							tempList.push(obj)
						})
						that.templateTypeList = tempList;
						that.templateTypeButtonList = tempList2;
					} else {

					}
				}, failData => {

				})
			},

			getTemplateDetail() {
				var that = this;
				this.$pin.request('GET', `/shop/template/record`, null, successData => {
					console.log(successData)
					if (successData.code == this.$pin.code.success&&successData.data) {
						var result = successData.data.meta;
						console.log(result)
						result.map(res => {
							res.templateTypeName = that.$pin.getTemplateNameById(res.template_type_id)
							res.products.map(pro => {

								pro.imgSrc = pro.images[0].url;
							// 	pro.id = pro.id
							})
						})
						that.templateList = result;

					} else {

					}
				}, failData => {

				})
			},


			toAddTempleteTypeIndex() {
				var that = this;
				
				uni.showActionSheet({
					itemList: that.templateTypeButtonList,
					success: function(res) {
						var name = that.templateTypeButtonList[res.tapIndex];
						var obj = that.templateTypeList[res.tapIndex];
						switch (name) {
							case "四方格":
								that.templateList.push(that.getTemplateTypeDetail(name, 4, obj.typeId));
								break;
							case "轮播图":
								that.templateList.push(that.getTemplateTypeDetail(name, 4, obj.typeId));
								break;
							case "横向瀑布流":
								that.templateList.push(that.getTemplateTypeDetail(name, 8, obj.typeId));
								break;
							case "纵向瀑布流":
								that.templateList.push(that.getTemplateTypeDetail(name, 6, obj.typeId));
								break;
							default:
								break;
						}
					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				});
			},
			getTemplateTypeDetail(typeNumber, limit, typeId) {
				// var tempArr = []
				// for (var i = 0; i < limit; i++) {
				// 	var obj = {
				// 		productId: "",
				// 		productName: "",
				// 		imgSrc: require('@/static/img/add.png')
				// 	}
				// 	tempArr.push(obj);
				// }
				return {
					templateTypeName: typeNumber,
					template_type_id: typeId,
					products: this.getTypeDetailList(limit)
				}
			},

			save() {

				var that = this;
				console.log("===== " + this.templateList)
				var data = [];
				//整理模板
				this.templateList.map((item, index) => {

					var tempObj = {};
					tempObj.template_type_id = item.template_type_id
					var tempProducts = [];
					item.products.map((v, i) => {
						// if (!v.product_id) {
						// 	return;
						// }
						var temProductObj = {};
						temProductObj.id = v.id
						tempProducts.push(temProductObj);
					})
					tempObj.products = tempProducts;

					data.push(tempObj);
					
				})
				this.$pin.request('POST', `/shop/template/record`, data, successData => {
					console.log(successData)
					if (successData.code == this.$pin.code.success) {

						uni.showToast({
							title: "保存成功"
						})
					} else if("4004" == successData.code){
						uni.showToast({
							icon:'error',
							duration: 2000,
							title:"不许出现空商品"
						})
					}else{
						
					}
				}, failData => {

				})


			},

			getTypeDetailList(limit) {

				var tempArr = []
				for (var i = 0; i < limit; i++) {
					var obj = {
						id: "",
						name: "标题",
						imgSrc: require('@/static/img/adding.png'),
						price:"",
						discount:""
					}
					tempArr.push(obj);
				}
				return tempArr;

			},
			typeDetailClick(e) {

				console.log("e:" + e.templateType);
				console.log("e:" + e.index); //模版中索引
				console.log("e:" + e.templateIndex); //模版列表索引

				this.selectedTemplateListIndex = e.templateIndex;
				this.selectedIndex = e.index;
				uni.navigateTo({
					url: `/pages/select-product/select-product`

				})

			},

			deleteItem(e) {

				console.log({
					...e
				});
				var templateIndex = e.templateIndex;
				this.templateList.splice(templateIndex, 1);

			},

			moveTop(e) {

				console.log({
					...e
				})
				var templateIndex = e.templateIndex; //原始索引
				if (templateIndex != 0) {
					var durationIndex = templateIndex - 1;
					this.templateList.splice(durationIndex, 0, this.templateList.splice(templateIndex, 1)[0]);
				}

			},
			moveDown(e) {

				console.log({
					...e
				})
				var templateIndex = e.templateIndex; //原始索引

				if (templateIndex != (this.templateList - 1)) {
					var durationIndex = templateIndex + 1;
					this.templateList.splice(durationIndex, 0, this.templateList.splice(templateIndex, 1)[0]);
				}

			},
			add(e) {

				console.log({
					...e
				})
				let that = this;
				var templateIndex = e.templateIndex; //原始索引

				var newObj = {
					id: "",
					productName: "",
					imgSrc: require('@/static/img/add.png')
				}
				var obj = this.templateList[templateIndex];
				obj.contentList.push(newObj)

			},
			cancel() {
				uni.navigateBack({})
			},
			// 判断模板是否有空的
			checkIsEmpty(list) {

				var isImpty = true;
				list.map((v, i) => {
					if (v.product_id) {
						isImpty = false;
						return;
					}

				})
				return isImpty;
			}
		}
	}
</script>

<style lang="scss">
	.page {
		width: 100vw;
		padding: 20rpx;
		box-sizing: border-box;

		.typeContainer {
			height: 88vh;
			overflow: scroll;
		}

	}
</style>